<template>
  echarts默认宽度高度为0 需要设置宽高
  <div id="demoDiv" ref="mychart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "App",
  mounted() {
    console.log("111");
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.mychart);

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: "ECharts 入门示例",
        link: "http://www.baidu.com",
        target: "self",
        backgroundColor: "pink",
        borderColor: "red",
        borderWidth: 5,
        // x: "center",
        subtext: "副标题",
        sublink: "http://www.baidu.com",
        // textStyle: {
        //   color: "yellow",
        //   fontSize: 30,
        // },
      },
      tooltip: {
        // 触发类型
        trigger: "axis", //  item 图像触发  axis 坐标轴触发
        axisPointer: {
          // 指向时的效果
          type: "cross", // line 显示一个实线  shadow 阴影效果  cross 十字准星
        },
        // showContent: false, // 提示框显示与否
        // 悬浮窗样式
        backgroundColor: "pink",
        borderColor: "red",
        borderWidth: 5,
        textStyle: {
          color: "yellow",
        },
        // 自定义提示框信息
        formatter(params) {
          // console.log(params);
          for (let i = 0; i < params.length; i++) {
            return `名字${params[i].name}--价格：${params[i].data.value}--采摘日期：${params[i].data.date}`;
          }
        },
      },
      legend: {
        show: true, // 设置图例的开启或者关闭
        // icon: "circle", // 圆形图标
        top: "10%", // 位置
        // item宽高
        itemWidth: 10,
        itemHeigth: 20,
        textStyle: {
          color: "red",
          fontSize: 30,
          backgroundColor: "yellow",
        },
        data: ["销量"],
      },
      // x轴的列
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      // y轴的列
      yAxis: {},
      // 数据
      series: [
        {
          name: "销量",
          type: "bar",
          data: [
            { value: "5", date: "2020-1-1" },
            { value: "6", date: "2020-1-1" },
            { value: "7", date: "2020-1-1" },
            { value: "9", date: "2020-1-1" },
            { value: "10", date: "2020-1-1" },
            { value: "13", date: "2020-1-1" },
          ],
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  },
};
</script>
<style lang="less">
#demoDiv {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
